<template>
  <div class="container-fluid">
    <div class="strat-exam-body">
      <div class="lyt-box">
        <div class="lyt-contents">
          <div class="center-parent">
            <div class="left-box">
              <div class="quiz-container">
                <div id="quiz" style="height: 196px;overflow: hidden"></div>
              </div>
            </div>
            <div style="margin-top: 140px;">
              <el-button id="previous" @click="showPreviousSlide"
                >前一题</el-button
              >
              <el-button id="next" @click="showNextSlide">下一题</el-button>
            </div>

            <div class="right-box">
              <div class="datike-box">
                <div class="exam-info-box">
                  全部题目（{{ questionNumber }}/3）
                </div>
                <div class="datike-info">
                  <div class="datika-item-box do-question-list">
                    <span>
                      <span class="datika-item">
                        <i
                          class="el-icon-location ui-marked"
                          style="display: none;"
                        ></i>
                        <span class="question-card do-question-index selected"
                          >1</span
                        >
                      </span>
                    </span>
                    <span>
                      <span class="datika-item">
                        <i
                          class="el-icon-location ui-marked"
                          style="display: none;"
                        ></i>
                        <span class="question-card do-question-index">2</span>
                      </span>
                    </span>
                    <span>
                      <span class="datika-item">
                        <i
                          class="el-icon-location ui-marked"
                          style="display: none;"
                        ></i>
                        <span class="question-card do-question-index">3</span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ExamStu",
  data() {
    return {
      chooseNum: null,
      myQuestions: [
        {
          question: "下列寄存器中，汇编语言程序员可见的是（）",
          answers: {
            A: "指令寄存器",
            B: "微指令寄存器",
            C: "数据寄存器",
            D: "标志状态寄存器",
          },
          correctAnswer: "D",
        },
        {
          question: "下列不属于I/O接口的是",
          answers: {
            A: "磁盘驱动器",
            B: "打印机适配器",
            C: "网络适配器",
            D: "可编程中断器",
          },
          correctAnswer: "D",
        },
        {
          question: "下列不能用IEEE浮点精确表示的是（）",
          answers: {
            A: "1.2",
            B: "1.25",
            C: "2.0",
            D: "2.5",
          },
          correctAnswer: "A",
        },
      ],
      questionNumber: 1,
      currentSlide: 1,
      active_slide: "active_slide",
      current: 0,
      activeClass: 0,
    };
  },
  mounted() {
    this.buildQuiz();
    this.showSlide(0);
  },
  methods: {
    addClass: function(index) {
      this.current = index;
    },
    choose: function(index) {
      this.cells[index].selected = true;
    },
    getItem(index) {
      this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
    },
    buildQuiz() {
      const output = [];

      this.myQuestions.forEach((currentQuestion, questionNumber) => {
        const answers = [];
        for (let letter in currentQuestion.answers) {
          answers.push(
            `<label style="display: block;margin-bottom: 10px;">
                     <input type="radio" name="question${questionNumber}" value="${letter}">
                      ${letter} :
                      ${currentQuestion.answers[letter]}
                   </label>`
          );
        }

        output.push(
          `<div class="slide">
                   <div class="question" style="font-size: 30px;margin-bottom: 10px;"> ${
                     currentQuestion.question
                   } </div>
                   <div class="answers" style="margin-bottom: 20px;text-align: left;display: inline-block;"> ${answers.join(
                     ""
                   )} </div>
                 </div>`
        );
      });

      document.getElementById("quiz").innerHTML = output.join("");
    },
    //点击切换后的隐藏和显示
    showSlide(n) {
      const slides = document.querySelectorAll("slide");
      const previousButton = document.getElementById("previous");
      const nextButton = document.getElementById("next");
      const submitButton = document.getElementById("submit");

      slides[this.currentSlide].myQuestions.remove("active-slide");
      slides[n].myQuestions.add("active_slide");
      this.currentSlide = n;

      if (this.currentSlide === 0) {
        previousButton.style.display = "none";
      } else {
        previousButton.style.display = "inline-block";
      }

      if (this.currentSlide === slides.length - 1) {
        nextButton.style.display = "none";
        submitButton.style.display = "inline-block";
      } else {
        nextButton.style.display = "inline-block";
        submitButton.style.display = "none";
      }
    },
    showNextSlide() {
      this.questionNumber++;
      this.showSlide(this.currentSlide + 1);
    },
    //下一题
    showPreviousSlide() {
      this.questionNumber--;
      this.showSlide(this.currentSlide - 1);
    },
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f8f9fb");
  },

  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>
<style scoped lang="less">
.active {
  /* background: #eee; */
  color: #1e82d2;
  font-weight: bolder;
}
.center-parent {
  width: 100%;
  height: 350px;
  display: table;
  padding-top: 20px;
}
.ui-star-box {
  text-align: right;
}
/*题目内容*/
.question-box {
  padding: 10px 10px 30px;
  width: 645px;
}
.auto-line {
  white-space: normal;
  width: 100%;
  height: auto;
  word-wrap: break-word;
  overflow: hidden;
}

.el-input--medium .el-input__inner {
  height: 36px;
  line-height: 36px;
}

/*右侧内容*/
.right-box {
  display: table-cell;
  width: 300px;
  vertical-align: top;
}
.datike-box {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  background: #f8f9fb;
}
.exam-info-box {
  background: #fff;
  padding: 20px;
  font-size: 1.2em;
}
.datike-info {
  margin-top: 10px;
  background: #fff;
  padding: 20px;
}
.datika-item-box {
  padding: 5px;
}
.datika-item {
  padding: 5px 2px;
  display: inline-block;
  position: relative;
}
.datika-item > .question-card {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 6px;
  cursor: pointer;
}
/*选中*/
.selected {
  border-color: blue !important;
}

.question {
  font-size: 30px;
  margin-bottom: 10px;
}
.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
}
.answers label {
  display: block;
  margin-bottom: 10px;
}
.slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
.active_slide {
  display: none !important;
  z-index: 99 !important;
}
</style>
